<template>
  <span class="play-time"
    ><em>{{ playingTime }}</em
    >&nbsp;/&nbsp;<em class="sum-time">{{ sumSongTime }}</em></span
  >
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "FloorSongPlayTime",
  setup() {
    const store = useStore();
    const sumSongTime = computed(() =>
      store.state.PlaySong.presentSong !== null
        ? store.state.PlaySong.presentSong.$_sumtime
        : "00:00"
    );
    const playingTime = computed(() => store.state.PlaySong.playingTime);
    return {
      sumSongTime,
      playingTime,
    };
  },
};
</script>

<style>
.play-time {
  position: absolute;
  top: 23px;
  right: 31px;
  color: #a1a1a1;
}
.sum-time {
  color: #797979;
}
</style>
